/**
 * 厦门大学计算机专业 | 前华为工程师
 * 专注《零基础学编程系列》  http://lblbc.cn/blog
 * 包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
 * 公众号：蓝不蓝编程
 */
<template>
  <div class="page-wrapper">
    <s-header :name="'我的'" :noback="true"></s-header>
    <div class="settings-row">
      <img class="settings-img" src="../images/settings.png" @click="gotoSettingsPage"/>
    </div>
    <div class="user-row">
      <img class="user-img" src="../images/user.png" />
      <div class="user-info">
        <div @click="onClickUserDesc">{{ userDesc }}</div>
        <div class="user-level">级别：白银</div>
      </div>
    </div>
    <div class="order-container">
      <div class="order-row">
        <div class="my-orders">我的订单</div>
        <div
          class="all-order-with-arrow"
          @click="gotoOrderPage(0)"
        >
          <div>全部订单</div>
          <img class="right_arrow" src="../images/right_arrow.png" />
        </div>
      </div>
      <div class="order-cells">
        <div class="order-cell" @click="gotoOrderPage(1)">
          <img class="order-img" src="../images/to_pay.png" />
          <div>待付款</div>
        </div>
        <div class="order-cell" @click="gotoOrderPage(2)">
          <img class="order-img" src="../images/to_deliver.png" />
          <div>待发货</div>
        </div>
        <div class="order-cell" @click="gotoOrderPage(3)">
          <img class="order-img" src="../images/to_receive.png" />
          <div>待收货</div>
        </div>
        <div class="order-cell" @click="gotoOrderPage(4)">
          <img class="order-img" src="../images/to_comment.png" />
          <div>待评价</div>
        </div>
        <div class="order-cell" @click="gotoOrderPage(5)">
          <img class="order-img" src="../images/to_return.png" />
          <div>退还/售后</div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
import navBar from '@/components/BottomNav'
import sHeader from '@/components/MyHeader'
import { getStorage } from '@/common/js/utils'
import { useRouter } from 'vue-router'
export default {
  components: {
    navBar,
    sHeader
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      userDesc: '登录/注册 >',
      loading: true
    })

    onMounted(async () => {
      const token = getStorage('token')
      if (token) {
        state.userDesc = '尊贵会员'
      }
    })

    const goBack = () => {
      router.go(-1)
    }

  const onClickUserDesc = () => {
      const token = getStorage('token')
      if (!token) {
        router.push({ path: '/login' })
      }
    }

    const gotoOrderPage = (status) => {
      const token = getStorage('token')
      if (token) {
        router.push({ path: '/order-list', query: { status } })
      } else {
        router.push({ path: '/login' })
      }
    }

    const gotoSettingsPage = () => {
      const token = getStorage('token')
      if (token) {
        router.push({ path: '/settings' })
      } else {
        router.push({ path: '/login' })
      }
    }

    return {
      ...toRefs(state),
      goBack,
      onClickUserDesc,
      gotoOrderPage,
      gotoSettingsPage
    }
  }
}
</script>

<style>
.page-wrapper {
  font-size: 14px;
  background: #f4f4f4;
  padding-bottom: 20px;
}
.settings-row {
  text-align: right;
  padding-top: 12px;
  padding-right: 24px;
}
.settings-img {
  height: 25px;
  width: 25px;
}
.user-row {
  padding-left: 20px;
  display: flex;
  flex-direction: row;
  background: #fff;
  margin-left: 12px;
  margin-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 5px;
}
.user-img {
  height: 50px;
  width: 50px;
}
.user-info {
  padding-left: 30px;
}

.user-level {
  margin-top: 6px;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #eaf3ff;
  border-radius: 10px;
}

.order-container {
  background-color: #fff;
  border-radius: 6px;
  margin-top: 24px;
  margin-left: 12px;
  margin-right: 12px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.order-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}

.my-orders {
  flex: 1;
}

.right_arrow {
  height: 24px;
  width: 24px;
}

.all-order-with-arrow {
  display: flex;
  flex-direction: row;
}

.order-img {
  height: 30px;
  width: 30px;
}

.order-cells {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.order-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
